<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>详情页</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/details.css" />

	</head>
	<body>
		<div id="header-html"></div>
		<div class="wrap">
			<div class="comm-tit">
				<a href="">商城首页></a>
				<a href="">数码外设></a>
				<a href="">鼠标垫></a>
				<b>CF 生化来袭 鼠标垫-浴血刀锋【现货】</b>
			</div>
			<div id="blk_detail_main">
			</div>
		</div>
		<div class="porduct-detail">
			<div class="pord-tab">
				<ul>
					<li class="curtab">
						商品详情
						<i></i>
					</li>
					<li>
						用户点评
						<i></i>
					</li>
					<li>
						联系商家
						<i></i>
					</li>
				</ul>
			</div>
			<div class="tabcont">
				<div class="prod-detail">
					<div class="parameter">
						<ul>
							<li>
								<label class="f1">商品名称:</label>
								<span class="f1">CF 生化来袭 鼠标垫-浴血刀锋【现货】</span>
							</li>
							<li>
								<label class="f1">店铺:</label>
								<span class="f1">和泰文化</span>
							</li>
							<li>
								<label class="f1">上架事件:</label>
								<span class="f1">2020-12-09</span>
							</li>
							<li>
								<label class="f1">商品毛重:</label>
								<span class="f1">130g</span>
							</li>
							<li>
								<label class="f1">商城:</label>
								<span class="f1">穿越火线</span>
							</li>
							<li>
								<label class="f1">周边分类:</label>
								<span class="f1">数码外设 /鼠标垫</span>
							</li>
						</ul>
					</div>
					<div class="detaibox">
						<p><img src="img/details/9.jpg"></p>
						<p><img src="img/details/10.jpg"></p>
						<p><img src="img/details/11.jpg"></p>
						<p><img src="img/details/12.jpg"></p>
						<p><img src="img/details/13.jpg"></p>
						<p><img src="img/details/14.jpg"></p>
						<p><img src="img/details/15.jpg"></p>
						<p><img src="img/details/16.jpg"></p>
						<p><img src="img/details/17.jpg"></p>
						<p><img src="img/details/18.jpg"></p>
						<p><img src="img/details/19.jpg"></p>
						<p><img src="img/details/20.jpg"></p>
						<p><img src="img/details/21.jpg"></p>
						<p><img src="img/details/22.jpg"></p>
						<p><img src="img/details/23.jpg"></p>
						<p><img src="img/details/24.jpg"></p>
						<p><img src="img/details/25.jpg"></p>
						<p><img src="img/details/26.jpg"></p>
						<p><img src="img/details/27.jpg"></p>
						<p><img src="img/details/28.jpg"></p>
					</div>
				</div>
			</div>

		</div>
		<div id="footer-html"></div>
	</body>
</html>
<script src="js/jQuery.js" type="text/javascript"></script>
<script src="js/header.js" type="text/javascript"></script>
<script type="text/javascript">
	$("#header-html").load("header.html");
	$("#footer-html").load("footer.html");
</script>
<script type="text/javascript">
	function details() {
		// console.log("goodsid",location.search);
		let goodsId = location.search.split("=")[1];
		$.get("./php/getGoodsInfo.php?goodsId=" + goodsId, function(str) {
			let goods = JSON.parse(str);
			// console.log("data",data);
			let htmlStr = `
			<div class="product-intro">
			
				<div class="product">
					<div class="i-mark">
						<span>新品</span>
					</div>
					<div class="showimg">
						<img class="show" src="${goods.goodsImg}">
						<div class="showbox"></div>
						<div class="showlarge">
							<img src="${goods.goodsImg}">
						</div>
					</div>
				</div>
				<div class="product-img">
					<ul>
						<li><img src="img/details/4.jpg"></li>
						<li><img src="img/details/5.jpg"></li>
						<li><img src="img/details/6.jpg"></li>
						<li><img src="img/details/7.jpg"></li>
						<li><img src="img/details/8.jpg"></li>
					</ul>
				</div>
				<div class="">
			
				</div>
				<div class="product-info">
					<h3>${goods.goodsName}</h3>
					<div class="prod-tips">${goods.goodsDese}</div>
					<div class="prod-price">
						<span class="prod-dispri">￥<strong>${goods.goodsPrice}</strong></span>
					</div>
					<div class="prod-detailbox">
						<div class="prod-sold">
							已售:
							<span>92</span>
						</div>
						<div class="prod-totalcom">
							累计评价:
							<span class="commentNum">7</span>
			
						</div>
						<div class="prod-starbox">
							<i></i>
							<span>5.0</span>
						</div>
			
					</div>
					<div class="blk_detail_spec">
						<div class="prod-sellist">
							<label class="f1">规格</label>
							<ul>
								<li class="current">
									<div class="prod-selbox">1块</div>
								</li>
							</ul>
						</div>
						<div class="prod-sellist">
							<label class="f1">款式</label>
							<ul>
								<li class="current">
									<div class="prod-selbox">浴血刀锋</div>
								</li>
							</ul>
						</div>
					</div>
					<div class="blk_detail_btn">
						<div class="prod-num">
							<label class="f1">数量</label>
							<div class="f1 ml42">
								<a href="" class="f1 num-plus">
									<i>-</i>
								</a>
								<input type="text" class="f1 nummidbtn" value="${goods.goodsCount}" />
								<a href="" class="f1 num-minus">
									<i>+</i>
								</a>
							</div>
							<span class="">(库存充足)</span>
						</div>
						<div class="prod-btn">
							<a href="cart.html" class="f1 joincart-btn">加入购物车</a>
							<a href="" class="f1 buy-btn">立即购买</a>
							<a href="" class="f1 btn-collect"><i></i><span>收藏</span></a>
						</div>
					</div>
				</div>
			</div>
			
			`;
			$("#blk_detail_main").html(htmlStr);
			bigMirror()
		});

	}
	$(function() {
		details()
	})

	function bigMirror() {



		$(function() {
			//鼠标移入产品小图事件
			$(".product-img img").click(function() { //鼠标悬浮在不同的产品小图片时外加黑色边框并且主图将其显示出来
				$(".product-img img").css({
					"border": "2px solid #FFF"
				});
				var imgsrc = $(this).attr("src"); //获取当前鼠标移入元素的src属性值将其赋值给主图元素
				$(".show").attr("src", imgsrc);
				$(".showlarge img").attr("src", imgsrc); //将鼠标选中的图传给放大图元素的src属性
			});
			//鼠标移入产品主图时出现放大的细节图和小框 
			$(".showimg").click(function() {
				$(".showbox").show();
				$(".showlarge").show();
			});
			//鼠标在产品主图移动事件
			$(".showimg").mousemove(function(e) {
				var mousex = e.clientX; //获取鼠标当前对于浏览器可视区的X坐标
				var mousey = e.clientY;
				var imgx = $(".showimg").offset().left; //获得产品主图对于文档的偏移坐标
				var imgy = $(".showimg").offset().top;
				//小框的left值是鼠标位移减去产品图元素偏移坐标减去小框宽度的一半，使鼠标保持位于小框的中间
				var boxleft = mousex - imgx - $(".showbox").width() / 2; //计算小框对于产品主图元素的距离用来定位
				var boxtop = mousey - imgy - $(".showbox").height() / 2;
				//鼠标移动小框位置跟着变化
				$(".showbox").css({
					"top": boxtop,
					"left": boxleft
				});

				//计算小框移动的最大范围
				var maxtop = $(".showimg").height() - $(".showbox").height();
				var maxleft = $(".showimg").width() - $(".showbox").width();
				//判断小框移动的边界
				if (boxtop <= 0) {
					$(".showbox").css("top", "0");
				} else if (boxtop > maxtop) {
					$(".showbox").css("top", maxtop);
				}
				if (boxleft <= 0) {
					$(".showbox").css("left", "0");
				} else if (boxleft > maxleft) {
					$(".showbox").css("left", maxleft);
				}
				//设置放大图的位置偏移量，获取小框偏移量乘放大倍数
				var showleft = -$(".showbox").position().left * 2; //position()方法返回当前元素相对于父元素的位置（偏移）
				var showtop = -$(".showbox").position().top * 2;
				//此处获取小框偏移量不应该使用前面计算出来的boxtop和boxleft值，因可能会出现超出移动的边界
				$(".showlarge img").css({
					"left": showleft,
					"top": showtop
				});
			});
			//鼠标离开产品主图元素事件，此处使用mouseleave事件只有在鼠标指针离开被选元素时才会触发，mouseout鼠标指针离开被选元素和其任何子元素都会触发。
			$(".showimg").mouseleave(function() {
				$(".showbox").hide(); //小框隐藏
				$(".showlarge").hide(); //放大图隐藏
			});

		});
	}
</script>
